<template>
    <div class="record-page">
        <a-select style="width: 200px; margin-bottom: 20px;" :default-value="type" @change="onChange">
            <a-select-option value="1">个人</a-select-option>
            <a-select-option value="2">部门</a-select-option>
        </a-select>
        <a-table :columns=" type === '1' ? columns1 : columns2" 
            :data-source="list" 
            rowKey="id"
            :loading="loading"
            bordered
            :pagination="pagination"
            @change="onPageChange"
        ></a-table>
    </div>
</template>
<script>
import { getUserRecord, getDeptRecord } from '@/services';

const columns1 = [
    { title: '部门', dataIndex: 'deptname' },
    { title: '评分类型', dataIndex: 'ratingDescription' },
    { title: '姓名', dataIndex: 'name' },
    { title: '职务', dataIndex: 'roles' },
    { title: '分数', dataIndex: 'score' },
]

const columns2 = [
    { title: '部门', dataIndex: 'deptname' },
    { title: '评分类型', dataIndex: 'ratingDescription' },
    { title: '分数', dataIndex: 'score' },
]

export default {
    name: 'Record',
    data(){
        return {
            type: '1',                          // 记录部门或个人
            columns1,
            columns2,
            list: [],
            total: 0,
            loading: false,
            pagination: {},
        }
    },
    mounted(){
        this.getRecordByUser();
    },
    methods: {
        // 下拉框改变
        async onChange(type){
            this.type = type;
            if(type === '2') this.getRecordByDept(1);
            else if(type === '1') this.getRecordByUser(1);
        },
        // 获取个人打分记录
        async getRecordByUser(page = 1){
            this.loading = true;
            let data = {
                page,
                pageSize: 10
            }
            this.list = [];
            let res = await getUserRecord(data);
            this.loading = false;
            if(res.responseObject){
                let pagination = { ...this.pagination };
                this.list = res.responseObject.data;
                pagination.total = res.responseObject.count;
                pagination.current = page;
                pagination.pageSize = 10;
                pagination.showTotal = (total, range) => `共找到 ${total} 条数据`
                this.pagination = pagination;
            }
        },
        // 获取部门打分记录
        async getRecordByDept(page = 1){
            this.loading = true;
            let data = {
                page
            }
            this.list = [];
            let res = await getDeptRecord(data);
            this.loading = false;
            if(res.responseObject){
                let pagination = { ...this.pagination };
                this.list = res.responseObject.data;
                pagination.total = res.responseObject.count;
                pagination.current = page;
                pagination.pageSize = 10;
                pagination.showTotal = (total, range) => `共找到 ${total} 条数据`
                this.pagination = pagination;
            }
        },
        // 切换分页
        onPageChange(pagination, filters, sorter){
            let { current, pageSize } = pagination;
            console.log(current);
            let type = this.type;
            if(type === '2') this.getRecordByDept(current);
            else if(type === '1') this.getRecordByUser(current);
        }
    }
}
</script>
<style lang="less" scoped>
    .record-page{
        margin: 20px 50px 0;
    }
</style>